<template>
	<a-modal
		:footer="null"
		:visible="visible"
		:title="title"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-form
			ref="formRef"
			:model="formState"
			:rules="rules"
			:label-col="labelCol"
			:wrapper-col="wrapperCol"
			@finishFailed="onFinishFailed"
			@finish="onFinish"
		>
			<a-form-item ref="name" label="商品名称" name="name">
				<a-input v-model:value="formState.name" placeholder="请输入商品名称" />
			</a-form-item>
			<a-form-item ref="picture" label="图片" name="picture">
				<UPLOAD
					ref="uploadbox"
					@sendStatus="backpictureurl"
					v-model:value="formState.picture"
				/>
			</a-form-item>
				<!-- <a-form-item  label="链接" name="url">
				<a-input v-model:value="formState.url" placeholder="请填写链接" />
			</a-form-item> -->
			<!-- <a-form-item label="生效时间" name="activetime">
				<a-radio-group v-model:value="formState.activetime">
					<a-radio value="0">立即生效</a-radio>
					<a-radio value="1">自定义时间</a-radio>
				</a-radio-group>
			</a-form-item> -->
			<a-form-item
				label="自定义时间"
				name="datetime"
				v-if="formState.activetime == '1'"
			>
				<a-range-picker
					style="width: 400px"
					v-model:value="formState.datetime"
					show-time
					format="YYYY-MM-DD HH:mm:ss"
				/>
			</a-form-item>
				<a-form-item  label="排序" name="sort">
				<a-input v-model:value="formState.sort" placeholder="请输入排序" />
			</a-form-item>
			<a-form-item label="状态" name="status">
				<a-select v-model:value="formState.status" placeholder="请选择状态">
					<a-select-option value="1">启用</a-select-option>
					<a-select-option value="0">禁用</a-select-option>
				</a-select>
			</a-form-item>

			<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" html-type="submit">确定</a-button>
				<a-button style="margin-left: 10px" @click="handleCancel"
					>取消</a-button
				>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script>
import {
	defineComponent,
	reactive,
	ref,
	onMounted,
	nextTick,
	computed,
	getCurrentInstance
} from 'vue'
import moment from 'moment'
import { useStore, mapGetters } from 'vuex'
import { UPLOAD } from '/@/components'
export default defineComponent({
	props: {
		model: {
			type: Object,
			default: function () {
				return {}
			}
		},
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: function () {
				return false
			}
		},
		cid: null
	},
	emits: {
		'close-modal': null,
		ok: null
	},
	components: {
		UPLOAD
	},
	setup(props, context) {
		const formRef = ref()
		const uploadbox = ref(null)
		const formState = reactive({
			name: '',
			picture: '',
			activetime: '0',
			status: '1',
			datetime: []
		})
		let validatepicture = async (_rule, value) => {
			if (value == '') {
				return Promise.reject('请上传图片')
			} else {
				return Promise.resolve()
			}
		}
		const rules = {
			name: [
				{
					required: true,
					message: '请输入商品名称',
					trigger: 'blur'
				}
				// {
				// 	min: 3,
				// 	max: 5,
				// 	message: 'Length should be 3 to 5',
				// 	trigger: 'blur'
				// }
			],
			datetime: [
				{
					type: 'array',
					required: true,
					message: '请选择时间',
					trigger: 'change'
				}
			],
			picture: [
				{
					required: true,
					message: '请上传图片',
					trigger: 'blur'
				}
			],

			activetime: [
				{
					required: true,
					message: '请选择生效时间',
					trigger: 'change'
				}
			],
			url:[ 
					{
					required: false,
					message: '请填写链接',
					trigger: 'change'
				}
			],
			status: [
				{
					required: true,
					message: '请选择状态',
					trigger: 'blur'
				}
			],
			sort:[{
				required: false,
					message: '请选择状态',
					trigger: 'blur'
			}]
		}

		const onFinish = (values) => {
			console.log('Success:', values)
			context.emit('ok', {
				model:props.model,
				values
			})
		}

		const onFinishFailed = (errorInfo) => {
			console.log('Failed:', errorInfo)
			// console.log(uploadbox.value.list)
		}
		const handleCancel = () => {
			context.emit('close-modal', false)
		}
		const resetForm = () => {
			formRef.value.resetFields()
		}
		const backpictureurl = (n) => {
			formState.picture = n[0]
		}
		onMounted(() => {
			const {
				create_time,
				edit,
				end_time,
				id,
				picture,
				is_effect,
				name,
				showUrl,
				start_time,
				status,
				sort,
				url
			} = props.model;
			 console.log(url)
            if(edit){
				// 编辑
				formState.name=name;
				formState.picture=showUrl+picture;
				formState.status=status+"";
				formState.sort=sort;
				if(is_effect==0){
                 formState.activetime=is_effect+""
				}else{
                  formState.activetime=is_effect+""
				  formState.datetime=[start_time,end_time];
				}
				 nextTick(()=>{
                        uploadbox.value.fileList.push({
						status: 'done',
						url: `${picture}`,
					})
             		 uploadbox.value.list.push(`${picture}`)
				  })
			}
		})
		return {
			formRef,
			labelCol: {
				span: 6
			},
			wrapperCol: {
				span: 14
			},
			other: '',
			formState,
			rules,
			handleCancel,
			resetForm,
			backpictureurl,
			uploadbox,
			onFinish,
			onFinishFailed
		}
	}
})
</script>